<template>
  <div class="com-container">
    商家销售统计
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
import { getSeller } from "@/api";
export default {
  data() {
    return {
      echartsDom: null,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    async getData() {
      let data = await getSeller();
      console.log(data);
    },
    // 初始化Eachats元素
    initEachat() {
      this.echartsDom = this.$echarts.init(this.$refs.seller_ref, "chalk"); //第一个参数是dom元素，第二个是主题
      const initOption = {};
      this.echartsDom.setOption(initOption);
    },
    // 浏览器大小变化
    screenAdapter() {
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      let adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 更新页面元素
    upData() {
      const initOption = {};
      this.echartsDom.setOption(initOption);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>